<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>

    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.js"></script>

    <script type="text/babel">


    class App extends React.Component {
        // 组件数据
        constructor(){
            super()
            this.state={
                message:"hello world",
            }

            // 对需要绑定的方法，提前绑定好this

        }
        // 组件方法 (实例方法)
       
        // 渲染内容  render方法
        render(){
            const {message } = this.state
            
            return (
                <div>
                    <div className="header">header</div>
                    <div className="Content">
                        <div>Banner</div>
                        <ul>
                            <li>列表数据1</li>
                            <li>列表数据2</li>
                            <li>列表数据3</li>
                            <li>列表数据4</li>
                            <li>列表数据5</li>
                        </ul>
                        </div>
                        <div className="Footer">Footer</div>
                        <img src="https://upload-images.jianshu.io/upload_images/27388007-db721c69acc055d1.png?imageMogr2/auto-orient/strip|imageView2/2/w/1200/format/webp" alt="" />
                </div>
            )
        }
    }

    // 将组件渲染到界面上
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)
    </script>
</body>
</html>